<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
	<!-- Required meta tags -->
	<title>个人信息</title>
	<meta charset="utf-8">
	<meta content="width=device-width, initial-scale=1" name="viewport">
	<link th:include="rider/common::commonheader">
</head>

<body>
<!--wrapper-->
<div class="wrapper">
	<div th:replace="rider/common::#commonbody1"></div>
	<div th:replace="rider/common::#commonbody2"></div>
	<!--start page wrapper -->
	<div class="page-wrapper">
		<div class="page-content">
			<!--breadcrumb-->
			<div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
				<div class="breadcrumb-title pe-3">用户信息</div>
				<div class="ps-3">
					<nav aria-label="breadcrumb">
						<ol class="breadcrumb mb-0 p-0">
							<li class="breadcrumb-item"><a href="javascript:"><i class="bx bx-home-alt"></i></a>
							</li>
							<li aria-current="page" class="breadcrumb-item active">用户信息</li>
						</ol>
					</nav>
				</div>

			</div>
			<!--end breadcrumb-->
			<div class="container">
				<div class="main-body">
					<div class="row">
						<div class="col-lg-4">
							<div class="card">
								<div class="card-body">
									<div class="d-flex flex-column align-items-center text-center">
										<img alt="Admin" class="rounded-circle p-1 bg-primary" th:src="@{/img/avatars/user1.png}" width="110">
										<div class="mt-3">
											<h4 th:text="${sysUser.getUsername()}">江建业</h4>
										</div>
									</div>
									<hr class="my-4" />
									<ul class="list-group list-group-flush">
										<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
											<h5 class="mb-0"><i class="layui-icon layui-icon-diamond" style="color: #60fff7"></i>等级</h5>
											<span class="text-secondary" >2</span>
										</li>
										<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
											<h5 class="mb-0"><i class="layui-icon layui-icon-login-wechat" style="color: #67ad5b"></i>微信</h5>
											<span class="text-secondary" >a2053449517</span>
										</li>
										<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
											<h5 class="mb-0"><i class="layui-icon layui-icon-login-qq" style="color: #2ac3ff"></i>qq</h5>
											<span class="text-secondary" >2053449517</span>
										</li>
										<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
											<h5 class="mb-0"><i class="layui-icon layui-icon-login-weibo" style="color: #ffa522;"></i>微博</h5>
											<span class="text-secondary" >abc123456</span>
										</li>
										<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
											<h5 class="mb-0"><i class="layui-icon layui-icon-gift" style="color: red"></i>糖豆数量</h5>
											<span class="text-secondary" th:text="${sysUser.getReward()}">0</span>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div class="col-lg-8">
							<form method="post" th:action="@{/updateGether}">
								<div class="card">
									<div class="card-body">
										<div class="row mb-3">
											<div class="col-sm-3">
												<h6 class="mb-0">真实姓名</h6>
											</div>
											<div class="col-sm-9 text-secondary">
												<input class="form-control" name="username" th:value="${sysUser.getUsername()}" type="text" />
											</div>
										</div>
										<div class="row mb-3">
											<div class="col-sm-3">
												<h6 class="mb-0">编号</h6>
											</div>
											<div class="col-sm-9 text-secondary">
												<input class="form-control" name="id" th:value="${sysUser.getId()}" type="text" />
											</div>
										</div>
										<div class="row mb-3">
											<div class="col-sm-3">
												<h6 class="mb-0">性别</h6>
											</div>
											<div class="col-sm-9 text-secondary">
												<input class="form-control" name="sex" th:value="${sysUser.getSex()}" type="text" />
											</div>
										</div>
										<div class="row mb-3">
											<div class="col-sm-3">
												<h6 class="mb-0">电话号码</h6>
											</div>
											<div class="col-sm-9 text-secondary">
												<input class="form-control" name="phone" th:value="${sysUser.getPhone()}" type="text" />
											</div>
										</div>
										<div class="row mb-3">
											<div class="col-sm-3">
												<h6 class="mb-0">密码</h6>
											</div>
											<div class="col-sm-9 text-secondary">
												<input class="form-control" name="password" th:value="${sysUser.getPassword()}" type="text" />
											</div>
										</div>
										<div class="row mb-3">
											<div class="col-sm-3">
												<h6 class="mb-0">地址</h6>
											</div>
											<div class="col-sm-9 text-secondary">
												<input class="form-control" name="address" th:value="${sysUser.getAddress()}" type="text" />
											</div>
										</div>
										<div class="row">
											<div class="col-sm-3"></div>
											<div class="col-sm-9 text-secondary">
												<input class="btn btn-primary px-4" type="submit" value="更新信息" />
											</div>
										</div>
									</div>
								</div>
							</form>
							<div class="row">
								<div class="col-sm-12">
									<div class="card">
										<div class="card-body">
											<h5 class="d-flex align-items-center mb-3">送单信息</h5>
											<p>本周送单完成量<span id="rewardBlock"></span></p>
											<div class="progress mb-3" style="height: 5px">
												<div aria-valuemax="100" aria-valuemin="0" class="progress-bar bg-primary"  id="reward" role="progressbar"></div>
											</div>
											<p>本周好评率</p>
											<div class="progress mb-3" style="height: 5px">
												<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="89" class="progress-bar bg-success" role="progressbar" style="width: 89%"></div>
											</div>
											<p>本周差评率</p>
											<div class="progress mb-3" style="height: 5px">
												<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="72" class="progress-bar bg-danger" role="progressbar" style="width: 72%"></div>
											</div>
											<p>总收益</p>
											<div class="progress mb-3" style="height: 5px">
												<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="55" class="progress-bar bg-warning" role="progressbar" style="width: 55%"></div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--end page wrapper -->
	<!--start overlay-->
	<div class="overlay toggle-icon"></div>
	<!--end overlay-->
	<!--Start Back To Top Button--> <a class="back-to-top" href="javaScript:"><i class='bx bxs-up-arrow-alt'></i></a>
</div>
<!--end wrapper-->
<div th:include="rider/common::#commontail"></div>
<script>
	$(function (){
		var reward;
		$.ajax({
			type: "post",
			url: '/doGetherReward',
			data: [],
			success: function (data) {
				$("#reward").width(data.reward+'%');
				reward=data.reward;
			}
		})
		$("#reward").mouseover(function(){
			$("#rewardBlock").text(reward+"%");
			$("#rewardBlock").display("block");
		});
		$("#reward").mouseout(function(){
			$("#rewardBlock").text("");
			$("#rewardBlock").display("none");
		});
	})
</script>
</body>

</html>
